<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/Shopping/operator/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Shopping/operator/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/Shopping/operator/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/Shopping/operator/css/style.css">
	<script src="/Shopping/operator/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/Shopping/operator/plugins/bootstrap/js/bootstrap.min.js"></script>
	  <script src="/Shopping/operator/plugins/jQuery/jquery.min.js"></script>
	    <script type="text/javascript" src="/Shopping/operator/plugins/jQuery/paging.js"></script>
	<!-- 分页插件内部样式 -->
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			/*
			  * 外面盒子样式---自己定义
			  */
			
			.page_div {
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 15px;
				font-family: "microsoft yahei";
				color: #666666;
				margin-right: 10px;
				padding-left: 20px;
				box-sizing: border-box;
			}
			/*
			 * 页数按钮样式
			 */
			
			.page_div a {
				min-width: 30px;
				height: 28px;
				border: 1px solid #dce0e0!important;
				text-align: center;
				margin: 0 4px;
				cursor: pointer;
				line-height: 28px;
				color: #666666;
				font-size: 13px;
				display: inline-block;
			}
			
			#firstPage,
			#lastPage {
				width: 50px;
				color: #0073A9;
				border: 1px solid #0073A9!important;
			}
			
			#prePage,
			#nextPage {
				width: 70px;
				color: #0073A9;
				border: 1px solid #0073A9!important;
			}
			
			.page_div .current {
				background-color: #0073A9;
				border-color: #0073A9;
				color: #FFFFFF;
			}
			
			.totalPages {
				margin: 0 10px;
			}
			
			.totalPages span,
			.totalSize span {
				color: #0073A9;
				margin: 0 5px;
			}
		</style>
    	<!-- /分页插件内部样式 -->
</head>
<body class="hold-transition skin-red sidebar-mini">
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#createEditModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button id="delBtn"type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>           
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                             	 <div class="has-feedback">
							                    品牌名称：<input id="selectInput" placeholder="请输出关键字">									
									<button class="btn btn-default" id="selectButton">查询</button>                                    
                                </div>
                            </div>
                            <!--工具栏/-->
                            
  							 <form method="post" id="deleteForm">
			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall"   type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                       		<tbody id="tbBody">
			                    	 
				                      	<c:forEach items="${brands }" var="brand" varStatus="v" >
				                      		<tr>
				                              <td><input id="check_${brand.id }" value="${brand.id }" name="delCheck" type="checkbox" class="deleteCheckbox"></td>			                              
					                          <td id="id_${brand.id }">${brand.id }</td>
										      <td id="name_${brand.id }">${brand.name }</td>									     
			                                  <td id="firstChar_${brand.id }">${brand.firstChar }</td>		                                 
			                                  <td class="text-center">                                           
			                                 	  <button id="b_${brand.id }" type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" onclick="getBrandId(${brand.id})" >修改</button>                                           
			                                  </td>
				                          </tr>
				                      	</c:forEach>
										</tbody>
				                      
									
									<tfoot>
										
									</tfoot>
			                     
			                  </table>
			                   </form>
			                  	<div value="1 0"></div>
								<div id="page" class="page_div" ></div>
			                  <!--数据列表/-->                        
                        </div>
                        <!-- 数据表格 /-->
                     </div>
                    <!-- /.box-body -->
         
<!-- 品牌修改编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">品牌编辑</h3>
		</div>
		<div class="modal-body">	
			<form action="post" id="updateForm">	
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>品牌Id</td>
		      		<td><input  class="form-control" id="brandIdInput" placeholder="品牌ID" readonly="readonly">  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>品牌名称</td>
		      		<td><input class="form-control" id="brandNameInput" placeholder="品牌名称" >  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>首字母</td>
		      		<td><input class="form-control" id="brandFirstCharInput" placeholder="首字母">  </td>
		      	</tr>		      	
			 </table>		
			 </form>		
		</div>
		<div class="modal-footer">						
			<button id="updateConfirmButton" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
<!-- 品牌添加编辑窗口 -->
<div class="modal fade" id="createEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">品牌编辑</h3>
		</div>
		<div class="modal-body">	
			<form action="post" id="createForm">	
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>品牌名称</td>
		      		<td><input  class="form-control" name="name" id="createBrandNameInput" placeholder="品牌名称" >  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>首字母</td>
		      		<td><input  class="form-control" name="firstChar" id="createBrandFirstCharInput" placeholder="首字母">  </td>
		      	</tr>		      	
			 </table>		
			 </form>		
		</div>
		<div class="modal-footer">						
			<button id="createConfirmButton" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

<script type="text/javascript">
	var brandId;
	var pageNo=1;
	var availPage;
	
	/* 点击修改按钮时触发  获取到点击的所属品牌记录的信息 */
	  function getBrandId(tempId){
	  		brandId=tempId;
	  		$("#brandIdInput").val(tempId);
	  		$("#brandNameInput").val($("#name_"+tempId).text());
	  		$("#brandFirstCharInput").val($("#firstChar_"+tempId).text());
	  }
	  
	 /* 点击确认修改按钮时触发 */
	  $("#updateConfirmButton").click(function(){
	  		if($("#brandNameInput").val()==""||$("#brandFirstCharInput").val()==""){
	  			alert("品牌名与首字母不能为空!");
	  			return;
	  		}
	  		
			$.post("/Shopping/brand/update.action",
			    {
			        id:brandId,
					name:$("#brandNameInput").val(),
					firstChar:$("#brandFirstCharInput").val()

			    },
			        function(data,status){
				      if(data!=''||data!=null){
				      	$("#name_"+brandId).text(data.name);
				      	$("#firstChar_"+brandId).text(data.firstChar);
				      }
			    });
			  });
		
		
		
		/* 点击确认创建按钮时触发 */
			$("#createConfirmButton").click(function(){
				if($("#createBrandNameInput").val()==""||$("#createBrandFirstCharInput").val()==""){
		  			alert("品牌名与首字母不能为空!");
		  			return;
		  		}
				$.ajax({
					type:"POST",      
					url:"/Shopping/brand/insert.action",
					data:$("#createForm").serialize(),
					cache:false,
					dataType:"json",
					success:function(data){
						  alert(data.message);
						  location.reload();
					}
				});
			});
			
			/* 全选框/反选点击触发 */
			var v=1;
			$("#selall").click(function(){
			if(v==1){
					$(".deleteCheckbox").prop("checked",true);
					v=0;
			}else{
					$(".deleteCheckbox").prop("checked",false);
					v=1;
				}
			});
			
			/* 批量删除按钮点击触发 */
			$("#delBtn").click(function(){
				var ids = "";
			/* 验证了复选框中存在form属性 form属性中就是 checkbox所处的表单id */
			
					if(!confirm("确认删除?"))
						return;
					if(""==ids){
						alert("请选择删除品牌!");
						return;
					}
					
					/* ids = ids.substring(0, ids.lastIndexOf(","));
					
					alert(ids); */
					
					$.ajax({
					
						type:"POST",      
						url:"/Shopping/brand/delete.action",
						data:$("#deleteForm").serialize(),
						cache:false,
						dataType:"json",
						success:function(data){
							  alert(data.message);
							  location.reload();
						}
					
					});
			});
			
			
			/* 分页所需的全局变量 */
			var pageNum;
			var pageSize=10;
			
			/* 传递整体的记录信息 */
			function ajaxTest(num) {
				
			$.ajax({
				url: "/Shopping/brand/findPage.action",
				type: "post",
				data: {
					pageNum:num,  /* 当前页 */
					pageSize:10,
					name:$("#selectInput").val()
				},
				dataType: "json",
				success: function(data) {
					console.log(data);
					pageSize=10;
					
					$("#page").paging({
						pageNo: num,
						totalPage: Math.ceil(data.total/10),		
						totalSize: data.total,
						callback: function(num) {
							pageNum=num;
							page();
						}
					})
				}
			})
		};
					/* 传递该分页的整页记录数 */
					function page(){
						$.post("/Shopping/brand/findByPage.action",
						    {
						        pageNum: pageNum,
								pageSize: pageSize,
								name:$("#selectInput").val()
						    },
						        function(data,status){
							     $("#tbBody").empty();
								for(var i=0;i<data.length;i++){
									$("#tbBody").append('<tr><td><input form="deleteForm" id="check_'+data[i].id+'" value="'+data[i].id+'" name="delCheck" type="checkbox" class="deleteCheckbox"></td><td id="id_'+data[i].id+'">'+data[i].id+'</td><td id="name_'+data[i].id+'">'+data[i].name+'</td><td id="firstChar_'+data[i].id+'">'+data[i].firstChar+'</td><td class="text-center"><button id="b_'+data[i].id+'" type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" onclick="getBrandId('+data[i].id+')" >修改</button></td></tr>');
								}
						  });
					}
					
					/* 在页面加载时调用分页方法显示分页栏并加载第一页的记录 */
				$(document).ready(function(){
					pageNum=1;
					pageSize=10;
					ajaxTest(1);
					page();
				})
				
				/* 点击查找按钮时触发 */	    
			$("#selectButton").click(function(){
// 				alert(pageNum);
// 				alert(pageSize);
				pageNum=1;
				ajaxTest(1);
				page(1);
				alert(v);
				
				
				
			})	
				/* 当搜索框为空时  搜索框失去焦点自动跳回显示全部品牌 */	
			$("#selectInput").change(function(){
				if($("#selectInput").val()==""){
					pageNum=1;
					ajaxTest(1);
					page(1);
				}
			
			});
			
</script>
   
</body>


</html>